<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="课程名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入课程名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="音频|视频" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择音频或视频" clearable>
          <el-option
            v-for="dict in dict.type.course_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="学科分类" prop="subject">-->
<!--        <el-input-->
<!--          v-model="queryParams.subject"-->
<!--          placeholder="请输入学科分类"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->

      <el-form-item label="是否免费" prop="chargeFree">
        <el-select v-model="queryParams.chargeFree" placeholder="请选择是否免费" clearable>
          <el-option
            v-for="dict in dict.type.sys_yes_no"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="级别" prop="grade">
        <el-select v-model="queryParams.grade" placeholder="请选择级别" clearable>
          <el-option
            v-for="dict in dict.type.grade_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="创建类型" prop="createType">
        <el-select v-model="queryParams.createType" placeholder="请选择创建类型" clearable>
          <el-option
            v-for="dict in dict.type.article_create_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="学科分类id(关联学科分类表)" prop="subjectId">-->
<!--        <el-input-->
<!--          v-model="queryParams.subjectId"-->
<!--          placeholder="请输入学科分类id(关联学科分类表)"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="讲师" prop="lecturerId">
       <!-- <el-input
          v-model="queryParams.lecturerId"
          placeholder="请输入讲师id"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <!-- lecturerList -->
        <el-select v-model="queryParams.lecturerId" placeholder="请选择讲师" >
          <el-option
            v-for="dict in lecturerList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="精选" prop="isFeatured">
        <el-select v-model="queryParams.isFeatured" placeholder="请选择课程是否精选" clearable>
          <el-option
            v-for="dict in isjingxuan"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="课程分类" prop="secondaryType">
        <el-select v-model="queryParams.secondaryType" placeholder="请选择课程分类" clearable>
          <el-option
            v-for="dict in dict.type.secondary_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['yljf:course:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['yljf:course:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['yljf:course:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['yljf:course:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
    v-loading="loading"
    :data="courseList"
    @selection-change="handleSelectionChange">
    <el-table-column type="expand">
      <template slot-scope="props">
        <!-- style="width: 1200px;" -->
          <el-card class="box-card" >
            <div slot="header" class="clearfix">
              <span>{{ props.row.name }}-课件目录</span>
              <el-row :gutter="10" class="mb8" style="float: right;">
                <el-col :span="1.5">
                  <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddCourseWare(props.row)"
                    v-hasPermi="['yljf:course_package:add']">新增课件</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="singleCourseWare" @click="handleUpdateCourseWare"
                    v-hasPermi="['yljf:course_package:edit']">修改课件</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multipleCourseWare" @click="handleDeleteCourseWare"
                    v-hasPermi="['yljf:course_package:remove']">删除课件</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportCourseWare"
                    v-hasPermi="['yljf:course_package:export']">导出课件</el-button>
                </el-col>
              </el-row>
            </div>
            <div  class="text item">
              <el-table  :data="props.row.children" style="width: 100%"
              @selection-change="handleSelectionChangeCourseWare">
                <el-table-column type="selection"  align="center" />
                <el-table-column label="主键id"  align="center" prop="id" />
                <el-table-column label="课程章节名"    align="center" prop="name">
                  <template slot-scope="scope">
                    <div class="cell-content">{{scope.row.name}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="标题"  align="center" prop="title">
                  <template slot-scope="scope">
                    <div class="cell-content">{{scope.row.title}}</div>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="课程id"  align="center" prop="courseId" /> -->
                <el-table-column label="文件地址"  align="center" prop="filePath">
                  <template slot-scope="scope">
                    <el-link type="primary" :href="scope.row.filePath" target="_blank">{{scope.row.filePath}}</el-link>
                  </template>
                </el-table-column>
                <el-table-column label="文件时长" align="center" prop="fileDuration" >
                  <template slot-scope="scope">
                    {{secondsToMinsSecs(scope.row.fileDuration)}}
                  </template>
                </el-table-column>
                <el-table-column label="视频/音频"  align="center" prop="type">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.course_type" :value="scope.row.type" />
                  </template>
                </el-table-column>
                <el-table-column label="排序" align="center"  prop="sort" />
                <el-table-column label="章节数" align="center"  prop="sections" />
                <!-- <el-table-column label="操作" align="center" >
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                      v-hasPermi="['yljf:course_package:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                      v-hasPermi="['yljf:course_package:remove']">删除</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
          </el-card>

      </template>
    </el-table-column>
      <el-table-column  type="selection" width="55" align="center" />
      <el-table-column label="主键ID" align="center" prop="id" />
      <el-table-column width="150" label="课程名称" align="center" prop="name" >
        <template slot-scope="scope">
          <div class="cell-content">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column label="课程图片" align="center" prop="img">
        <template slot-scope="scope">
          <img :src="setImgUrl(scope.row.img)" alt="" width="100%"/>
        </template>
      </el-table-column>
      <el-table-column label="音频|视频" align="center" prop="type">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.course_type" :value="scope.row.type"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="学科分类" align="center" prop="subject" />-->
      <el-table-column label="总时长" align="center" prop="timeCount" />
      <el-table-column label="是否免费" align="center" prop="chargeFree">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.chargeFree"/>
        </template>
      </el-table-column>
      <el-table-column label="级别" align="center" prop="grade">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.grade_type" :value="scope.row.grade"/>
        </template>
      </el-table-column>
      <el-table-column label="课程价格" align="center" prop="price" />
      <el-table-column label="播放量" align="center" prop="playCount" />
      <el-table-column width="200" label="简介" align="center" prop="info">
        <template slot-scope="scope">
          <div class="cell-content">{{scope.row.info}}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建类型" align="center" prop="createType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.article_create_type" :value="scope.row.createType"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="创建人id" align="center" prop="createId" />-->


<!--      <el-table-column label="学科分类id(关联学科分类表)" align="center" prop="subjectId" />-->
      <el-table-column label="讲师" align="center" prop="lecturerId" >
        <template slot-scope="scope">
          {{ lecturerList.filter(item=>item.value==scope.row.lecturerId)[0].label}}
        </template>
      </el-table-column>

      <el-table-column label="是否精选" align="center" prop="isFeatured">
        <template slot-scope="scope">

          {{scope.row.isFeatured == 'Y' ? '是' : '否'}}
          <!-- <dict-tag :options="dict.type.isjingxuan" :value="scope.row.isFeatured"/> -->
        </template>
      </el-table-column>
      <el-table-column width="130" label="课程分类" align="center" prop="secondaryType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.secondary_type" :value="scope.row.secondaryType"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="${comment}" align="center" prop="remark" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['yljf:course:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['yljf:course:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改课程对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="520px"  append-to-body>
      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        class="modal-form"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入课程名称" />
        </el-form-item>
        <el-form-item label="课程图片" prop="img">
          <image-upload :limit="1" v-model="form.img" />
          <!-- <el-input v-model="form.img" placeholder="请输入课程图片" /> -->
        </el-form-item>
        <el-form-item label="音频|视频" prop="dibber_id">

          <!-- <file-upload
            :limit="1"
            :isVideoOrAudio="true"
            @duration="setDuration"
            @dibberId="setDibberId"
            :fileType="['mp4','avi','mov','mp3','wav','aac']"
            :fileSize="1000"
            v-model="form.dibber_id"
            :on-progress="handleProgress"
          /> -->
         <el-select v-model="form.type" placeholder="请选择音频/视频" style="width: 100%;">
            <el-option
              v-for="dict in dict.type.course_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科分类" prop="subject">
          <el-input v-model="form.subject" placeholder="请输入学科分类" />
        </el-form-item>
<!--        <el-form-item label="课程总时长" prop="timeCount">-->
<!--          <el-input v-model="form.timeCount" placeholder="请输入课程总时长" />-->
<!--        </el-form-item>-->
        <el-form-item label="是否免费" prop="chargeFree">
          <el-select v-model="form.chargeFree" placeholder="请选择是否免费" style="width: 100%;">
            <el-option
              v-for="dict in dict.type.sys_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="级别" prop="grade">
          <el-select v-model="form.grade" placeholder="请选择级别" style="width: 100%;">
            <el-option
              v-for="dict in dict.type.grade_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入课程价格" />
        </el-form-item>
<!--        <el-form-item label="播放量" prop="playCount">-->
<!--          <el-input v-model="form.playCount" placeholder="请输入播放量" />-->
<!--        </el-form-item>-->
        <el-form-item label="简介" prop="info">
          <el-input v-model="form.info" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="创建类型" prop="createType">
          <el-select v-model="form.createType" @change="changeCreateType" style="width: 100%;" placeholder="请选择创建类型:用户|中医馆">
            <el-option
              v-for="dict in dict.type.article_create_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="form.createType != 'user'" label="创建人id" prop="createId" >
          <el-input v-model="form.createId" disabled placeholder="请输入创建人id" />
        </el-form-item> -->
<!--        <el-form-item label="学科分类id(关联学科分类表)" prop="subjectId">-->
<!--          <el-input v-model="form.subjectId" placeholder="请输入学科分类id(关联学科分类表)" />-->
<!--        </el-form-item>-->
        <el-form-item label="讲师" prop="lecturerId" >
          <!-- <el-input v-model="form.lecturerId" placeholder="请输入讲师id" /> -->

          <el-select v-model="form.lecturerId" placeholder="请选择讲师" style="width: 100%;">
            <el-option
              v-for="dict in lecturerList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>

        </el-form-item>
        <el-form-item label="是否精选" prop="isFeatured">
          <el-select v-model="form.isFeatured" placeholder="请选择是否精选" style="width: 100%;">
            <el-option
              v-for="dict in isjingxuan"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程分类" prop="secondaryType">
          <el-select v-model="form.secondaryType" placeholder="请选择课程分类" style="width: 100%;">
            <el-option
              v-for="dict in dict.type.secondary_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormCourseWare">确 定</el-button>
        <el-button @click="cancelCourseWare">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改课件目录对话框 -->
    <el-dialog :title="titleCourseWare"
      :visible.sync="openCourseWare"
      width="560px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="formCourseWare" :model="formCourseWare" :rules="rulesCourseWare" label-width="120px" class="modal-form">
        <el-form-item label="课程章节名" prop="name">
          <el-input v-model="formCourseWare.name" placeholder="请输入课程章节名" />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="formCourseWare.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="课程" prop="courseId">
          <!-- <el-input v-model="form.courseId" placeholder="请输入课程id" /> -->

          <el-select @change="selectCourse" v-model="formCourseWare.courseId" placeholder="请选择课程" style="width: 100%;">
            <el-option
              v-for="dict in courseListCourseWare"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            >
            </el-option>
          </el-select>
          <!-- </el-form-item> -->
        </el-form-item>


        <!-- <el-form-item label="视频/音频" prop="type">
          <el-select v-model="form.type" placeholder="请选择video/audio">
            <el-option
              v-for="dict in dict.type.course_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="音频|视频" prop="dibberId">

          <file-upload :limit="1" :isVideoOrAudio="true" @duration="setDuration" @dibberId="setDibberId"
            @delete="deleteVideo" :fileType="['mp4','avi','mov','mp3','wav','aac']" :fileSize="2048"
            v-model="formCourseWare.dibberId" />


          <video :src="formCourseWare.filePath" v-if="formCourseWare.dibberId && form.type == 'video'" style="width: 100%;" controls></video>
          <audio :src="formCourseWare.filePath" v-if="formCourseWare.dibberId && form.type == 'audio'" style="width: 100%;" controls></audio>
        </el-form-item>



        <!-- <el-form-item label="章节数" prop="sections">
          <el-input v-model="form.sections" placeholder="请输入章节数" />
        </el-form-item> -->
        <el-form-item label="章节数" prop="sections">
          <!-- <el-input v-model="form.sections" disabled placeholder="请输入章节数" /> -->
          <el-select  @change="changeSort" v-model="formCourseWare.sections" placeholder="请选择章节数" style="width: 100%;">
            <el-option
              v-for="section in sections"
              :key="section.id"
              :label="section.name"
              :value="section.id"
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formCourseWare.sort" :disabled="true" placeholder="请输入排序" />
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormCourseWare">确 定</el-button>
        <el-button @click="cancelCourseWare">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCourse, getCourse, delCourse, addCourse, updateCourse} from "@/api/yljf/course";
import {
    listCourse_package,
    getPlayInfo,
    getCourse_package,
    delCourse_package,
    addCourse_package,
    updateCourse_package
  } from "@/api/yljf/course_package";
import { listLecturer } from "@/api/yljf/lecturer";
export default {
  name: "Course",
  dicts: ['course_type', 'secondary_type', 'grade_type', 'sys_yes_no', 'isjingxuan', 'article_create_type'],
  data() {
    return {
      // 遮罩层
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 选中数组
      idsCourseWare: [],
      // 非单个禁用
      singleCourseWare: true,
      // 非多个禁用
      multipleCourseWare: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 课程表格数据
      courseList: [],
      courseListCourseWare:[],
      // 弹出层标题
      title: "",
      titleCourseWare:"",
      // 是否显示弹出层
      open: false,
      openCourseWare:false,
      //章节列表
      sections: [
        {id:1,name:'一'},{id:2,name:'二'},{id:3,name:'三'},{id:4,name:'四'},{id:5,name:'五'},
        {id:6,name:'六'},{id:7,name:'七'},{id:8,name:'八'},{id:9,name:'九'},{id:10,name:'十'},
      ],
      queryParamsCourseWare: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          title: null,
          courseId: null,
          filePath: null,
          fileDuration: null,
          type: null,
          sort: null,
          sections: null
        },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        img: null,
        type: null,
        subject: null,
        timeCount: null,
        chargeFree: null,
        grade: null,
        price: null,
        playCount: null,
        info: null,
        createType: null,
        createId: null,
        subjectId: null,
        lecturerId: null,
        isFeatured: null,
        secondaryType: null,
      },
      isjingxuan:[
        {value:'Y',label:'是'},
        {value:'N',label:'否'}
      ],
      lecturerList:[

      ],
      // 表单参数
      form: {},
      formCourseWare:{},
      // 表单校验
      rules: {
      },
      rulesCourseWare:{}
    };
  },
  created() {
    this.getList();
    this.getlistLecturer();

  },
  methods: {
    // 课件方法
      secondsToMinsSecs(seconds) {
          let date = new Date(null);
          date.setSeconds(seconds); // 注意，这种方法会将秒数转换成毫秒
          let minutes = date.getMinutes();
          let secondsInMins = date.getSeconds();
          return `${minutes}:${secondsInMins.toString().padStart(2, '0')}`;
      },
      // 根据更改排序信息
      changeSort(e){
        this.formCourseWare.sort=e
        console.log(666);
      },
      numberToChinese(num) {
          if (num > 1000) {
              throw new Error('数字超过1000，无法转换');
          }

          const chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
          const units = ['', '十', '百'];

          let result = '';
          let unitIndex = 0; // 用于记录单位（十位、百位）的索引

          while (num > 0) {
              const digit = num % 10; // 获取当前最低位的数字
              if (digit !== 0 || unitIndex === 0) { // 如果数字不为零或者是个位，直接添加数字和单位
                  result = chineseNums[digit] + units[unitIndex] + result;
              } else if (digit === 0 && unitIndex !== 0) { // 如果数字为零且不是个位，只添加'零'
                  result = chineseNums[digit] + result;
              }
              num = Math.floor(num / 10); // 移除已处理的最低位
              unitIndex++; // 移动到下一个单位（十位、百位）
          }

          // 处理连续的'零'的情况，例如101转换为“一百零一”而不是“一百一”
          result = result.replace(/零+/g, '零');
          // 处理开头的'零'和末尾的'零'
          result = result.replace(/^零|零$/g, '');

          return result;
      },

      // 首先，我们需要一个函数来将中文数字转换为阿拉伯数字
      chineseToNumber(str) {
          const chineseNumbers = {
              '九': 9, '八': 8, '七': 7, '六': 6, '五': 5,
              '四': 4, '三': 3, '二': 2, '一': 1, '十': 10,
              '百': 100, '千': 1000, '万': 10000 // 可以根据需要扩展
          };
          let result = 0;
          let temp = 1; // 用于记录当前的数值单位，如个、十、百等
          for (let i = str.length - 1; i >= 0; i--) {
              const num = chineseNumbers[str[i]];
              if (num >= 10) { // 如果是单位，如十、百等
                  temp = num;
              } else { // 如果是数字，则乘以对应的单位
                  result += num * temp;
                  temp = 1; // 重置单位为个位
              }
          }
          return result;
      },


      selectCourse(courseId){
        console.log(courseId)
        // listCourse_package({
        //   pageNum: 1,
        //   pageSize: 100,
        //   courseId
        // }).then(response => {
        //   // console.log(response.rows.length)
        //   // console.log()
        //   if(response.rows.length > 0){
        //     var numbers = response.rows.map(item=>{
        //       return item.sections
        //     })

        //     let numberArray = numbers.map(this.chineseToNumber)
        //     let maxNumber = Math.max(...numberArray)
        //     this.form.sections = ''
        //     this.sections = this.getMissingNumbersWithChinese(numberArray)
        //   } else {

        //     this.form.sections = ''
        //     this.sections = ['一','二','三']

        //   }


        //   // console.log(maxNumber,numberArray,a)
        //   // this.form.sections = this.numberToChinese(response.rows.length + 1)

        // });

      },

      getMissingNumbersWithChinese(arr) {
          const max = Math.max(...arr);
          const maxPlusOne = max + 3;
          const allNumbers = Array.from({ length: maxPlusOne }, (_, i) => i + 1);
          const originalSet = new Set(arr);
          const missingNumbers = allNumbers.filter(n => !originalSet.has(n));

          const units = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九'];

          function numberToChinese(n) {
              let result = '';
              const hundred = Math.floor(n / 100);
              if (hundred > 0) {
                  result += units[hundred] + '百';
              }

              const ten = Math.floor((n % 100) / 10);
              const one = n % 10;

              if (ten > 0 || one > 0) {
                  if (hundred > 0 && ten === 0 && one !== 0) {
                      result += '零';
                  }

                  if (ten > 0) {
                      if (hundred === 0 && ten === 1) {
                          result += '十';
                      } else {
                          result += units[ten] + '十';
                      }
                  }

                  if (one > 0) {
                      result += units[one];
                  }
              }

              return result;
          }

          return missingNumbers.map(numberToChinese);
      },




      setDuration(result) {
        // console.log('setDuration', result)
        this.formCourseWare.fileDuration = result.duration;
        this.formCourseWare.type = result.type
        // console.log('setDuration',this.form.dibber_id)
      },

      setDibberId(dibberId) {
        // console.log('setDibberId', dibberId, this.formCourseWare)
        getPlayInfo({
          videoId: dibberId
        }).then(response => {


          // console.log(response.data)
          if (response.code == 200) {
            this.formCourseWare.filePath = response.data.filePath
            this.formCourseWare.imgUrl = response.data.imgUrl
            console.log(666);
            console.log(this.formCourseWare)
          }


        });

      },
      deleteVideo() {
        this.formCourseWare.filePath = null;
        this.formCourseWare.imgUrl = null;
        this.formCourseWare.fileDuration = null;
        this.formCourseWare.type = null
      },
    // 课件方法

    setImgUrl(url){
      if(url.indexOf('http://') == 0 || url.indexOf('https://') == 0){
        return url
      } else {
        return process.env.VUE_APP_BASE_API+url
      }

    },
    // setDuration(result){
    //   console.log('setDuration',result)
    //   this.form.File_duration = result.duration;
    //   this.form.type = result.type
    //   console.log('setDuration',this.form.dibber_id)
    // },

    // setDibberId(dibber_id){
    //   console.log('setDibberId',dibber_id,this.form)
    //   getPlayInfo({videoId:dibber_id}).then(response => {
    //       console.log(response.data)
    //       if(response.code == 200){
    //         this.form.file_path = response.data.filePath
    //         this.form.img_url = response.data.imgUrl
    //         console.log(this.form)
    //       }


    //   });

    // },

    getlistLecturer(){
      listLecturer({
        pageNum: 1,
        pageSize: 10,
        lecturerName: null
      }).then(response => {


        this.lecturerList = response.rows.map((item)=>{
          return {
            value:item.id,
            label:item.lecturerName
          }
        })
        // console.log(this.lecturerList);
      });
    },

    handleProgress(event) {
      console.log(event)
          // this.uploading = true;
          // this.percent = Math.floor(event.percent); // 取整百分比
    },

    /** 查询课程列表 */
    getList() {
      this.loading = true;
      listCourse(this.queryParams).then(response => {
        // console.log(response);
        // this.courseList = response.rows;
        // this.total = response.total;
        // this.loading = false;

        // 查询课件列表
        listCourse_package({pageSize: 500}).then(item=>{
          console.log(item);

          // 创建树形结构
          response.rows.map(v=>{
            v.children=[]
            item.rows.map(it=>{
              if(v.id==it.courseId){
                v.children.push(it)
              }
            })
          })

          console.log(response.rows);
          this.courseList = response.rows;
          this.total = response.total;
          this.loading = false;

        })
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancelCourseWare() {
      this.openCourseWare = false;
      this.resetCourseWare();
    },
    // 表单重置
    resetCourseWare() {
      this.formCourseWare = {
        id: null,
        name: null,
        title: null,
        courseId: null,
        filePath: null,
        fileDuration: null,
        type: null,
        createTime: null,
        sort: null,
        sections: null
      };
      this.resetForm("formCourseWare");
    },
    reset() {
      var videoObj = {
        File_duration:this.form.File_duration,
        type:this.form.type,
        file_path:this.form.file_path,
        img_url:this.form.img_url
      }

      console.log(videoObj)



      this.form = {
        id: null,
        name: null,
        img: null,
        // type: null,
        subject: null,
        timeCount: null,
        chargeFree: null,
        grade: null,
        price: null,
        playCount: null,
        info: null,
        createType: null,
        createId: null,
        subjectId: null,
        lecturerId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        isFeatured: null,
        secondaryType: null,
        remark: null,
        // File_duration:null

      };
      console.log(this.form)
      this.resetForm("form");
      // this.form = {
      //   ..。
      // }
      // ...videoObj
      // console.log(this.form)
    },
    resetCourseWare() {
      this.formCourseWare = {
        id: null,
        name: null,
        title: null,
        courseId: null,
        filePath: null,
        fileDuration: null,
        type: null,
        createTime: null,
        sort: null,
        sections: null
      };
      this.resetForm("formCourseWare");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    changeCreateType(createType){
      if(createType != 'user'){
        this.form.createId = this.$store.state.user.userId
      } else {
        this.form.createId = ''
      }

      console.log(this.$store.state.user.userId)
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    handleSelectionChangeCourseWare(selection) {
      this.idsCourseWare = selection.map(item => item.id)
      this.singleCourseWare = selection.length!==1
      this.multipleCourseWare = !selection.length
    },
    /** 新增课件按钮操作*/
    handleAddCourseWare(row) {
      this.courseListCourseWare=[]
      this.resetCourseWare();
      this.openCourseWare = true;
      this.titleCourseWare = "添加课程";
      console.log(row);
      let obj={}
      obj.label = row.name
      obj.value = row.id
      this.courseListCourseWare.push(obj)
      console.log(this.courseListCourseWare);

      // listCourse({
      //   pageNum: 1,
      //   pageSize: 100,
      // }).then(response => {
      //   console.log(response.rows.le)
      //   this.courseList = response.rows.map((item) => {
      //     return {
      //       value: item.id,
      //       label: item.name
      //     }
      //   })
      // });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加课程";

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCourse(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改课程";
      });
    },
    /** 修改按钮操作 */
    handleUpdateCourseWare(row) {
      this.resetCourseWare();
      const id = row.id || this.idsCourseWare
      getCourse_package(id).then(response => {
        this.formCourseWare = response.data;
        this.openCourseWare = true;
        this.titleCourseWare = "修改课程目录";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCourse(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCourse(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 新增或修改课件
    submitFormCourseWare() {
      console.log(this.formCourseWare);
      // return
      this.$refs["formCourseWare"].validate(valid => {
        if (valid) {

          if (this.formCourseWare.id != null) {
            updateCourse_package(this.formCourseWare).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openCourseWare = false;
              this.getList();
            });
          } else {

            addCourse_package(this.formCourseWare).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openCourseWare = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除课程编号为"' + ids + '"的数据项？').then(function() {
        return delCourse(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 删除按钮操作 */
    handleDeleteCourseWare(row) {
      const ids = row.id || this.idsCourseWare;
      this.$modal.confirm('是否确认删除课程目录编号为"' + ids + '"的数据项？').then(function() {
        return delCourse_package(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('yljf/course/export', {
        ...this.queryParams
      }, `course_${new Date().getTime()}.xlsx`)
    },
    /** 导出按钮操作 */
    handleExportCourseWare() {
      this.download('yljf/course_package/export', {
        ...this.queryParamsCourseWare
      }, `course_package_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style lang="scss" scoped>
.cell-content{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; /* 限制行数为3 */
      overflow: hidden;
  }

  ::v-deep{
    .el-form-item__label{
      width: initial !important;
    }
  }

  .modal-form{
    max-height: 450px;
    overflow-y: auto;
    padding-right: 20px;

  }


  .modal-form::-webkit-scrollbar {
      width: 5px;
      // height: 12px;
  }
  .modal-form::-webkit-scrollbar-track {
      background: #f1f1f1;
      // border-radius: 5px;
  }

  .modal-form::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 10px;
  }

</style>
